<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="./css/zhuce.css">
    <link rel="stylesheet" href="./css/common.css">
</head>

<body>
    <div class="nav-logo">
        <img src="./images/logo02.png" alt="logo">
                <div class="tit">
                    足不出户·新鲜每一天
                </div>
            </div>
            <div class="container">
                <div class="header">
                    <h2>用户注册</h2>
                </div>
                <form class="form" id="form">
                    <div class="form_control" id="form_control">
                        <label for="">用户名</label>
                        <input type="text" placeholder="请输入用户名" id="username">
                        <i class="el-icon-success"></i>
                        <i class="el-icon-warning"></i>
                        <small>错误信息</small>
                    </div>
                    <div class="form_control" id="form_control">
                        <label for="">邮箱</label>
                        <input type="text" placeholder="请输入邮箱" id="email">
                        <i class="el-icon-success"></i>
                        <i class="el-icon-warning"></i>
                        <small>错误信息</small>
                    </div>
                    <div class="form_control" id="form_control">
                        <label for="">密码</label>
                        <input type="password" placeholder="请输入密码" id="password">
                        <i class="el-icon-success"></i>
                        <i class="el-icon-warning"></i>
                        <small>错误信息</small>
                    </div>
                    <div class="form_control" id="form_control">
                        <label for="">确认密码</label>
                        <input type="password" placeholder="请再次输入密码" id="password2">
                        <i class="el-icon-success"></i>
                        <i class="el-icon-warning"></i>
                        <small>错误信息</small>
                    </div>
                    <button type="submit">注册</button>
                </form>
            </div>
            <div class="bottom">
                <ul class="row">
                    <li>关于我们</li>
                    <li>|</li>
                    <li>联系我们</li>
                    <li>|</li>
                    <li>招聘人才</li>
                </ul>
                <p>
                    CopyRight&copy; 2023 22级移动应用开发班
                </p>
                <p>
                    电话:12345678999&nbsp;&nbsp; QQ:3370997761@qq.com
                </p>
            </div>
</body>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    const form = document.getElementById("form")
    const username = document.getElementById("username")
    const email = document.getElementById("email")
    const password = document.getElementById("password")
    const password2 = document.getElementById("password2")
    form.addEventListener('submit', (e) => {
        e.preventDefault();//防止页面提交
        checkInputs();
    })
    function checkInputs() {
        const usernameValue = username.value.trim();
        const emailValue = email.value.trim();
        const passwordValue = password.value.trim();
        const password2Value = password2.value.trim();
        //用户名验证
        if (usernameValue === "") {
            setError(username, "用户名不能为空");
        } else {
            setSuccess(username);
        }
        //邮箱验证
        if (emailValue === "") {
            setError(email, "邮箱不能为空");
        } else if (!valiEmail(emailValue)) {
            setError(email, "邮箱格式不正确，请重新输入");
        } else {
            setSuccess(email);
        }
        //密码验证
        if (passwordValue === "") {
            setError(password, "密码不能为空");
        } else {
            setSuccess(password);
        }
        //重复验证密码
        if (password2Value === "") {
            setError(password2, "密码不能为空");
        } else if (passwordValue !== password2Value) {
            setError(password2, "两次密码输入不一致，请重新输入");
        } else {
            setSuccess(password2);
        }
    }
    function setError(element, msg) {
        const element_par = element.parentElement;
        const message = element_par.querySelector('small');
        message.textContent = msg;
        //error是验证错误的样式，success是验证成功的样式
        element_par.classList.remove('success')
        element_par.classList.add('error')
    }
    function setSuccess(element) {
        const element_par = element.parentElement;
        element_par.classList.remove('error')
        element_par.classList.add('success')
    }
    function valiEmail(email) {
        const regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        return regEmail.test(email);
    }    
</script>

</html>